'use client'

import { useState } from 'react'

export default function OrderPage() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    country: '',
    streetAddress: '',
    streetAddress2: '',
    city: '',
    state: '',
    zipCode: '',
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* 账单信息 */}
        <div>
          <h2 className="text-xl font-semibold mb-6">Billing Details</h2>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm mb-2">
                  First Name <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  name="firstName"
                  value={formData.firstName}
                  onChange={handleInputChange}
                  className="w-full p-2 border rounded-md"
                  required
                />
              </div>
              <div>
                <label className="block text-sm mb-2">
                  Last Name <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  name="lastName"
                  value={formData.lastName}
                  onChange={handleInputChange}
                  className="w-full p-2 border rounded-md"
                  required
                />
              </div>
            </div>

            <div>
              <label className="block text-sm mb-2">
                Country / Region <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="country"
                value={formData.country}
                onChange={handleInputChange}
                className="w-full p-2 border rounded-md"
                required
              />
            </div>

            <div>
              <label className="block text-sm mb-2">
                Street address <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="streetAddress"
                value={formData.streetAddress}
                onChange={handleInputChange}
                className="w-full p-2 border rounded-md mb-2"
                required
              />
              <input
                type="text"
                name="streetAddress2"
                value={formData.streetAddress2}
                onChange={handleInputChange}
                className="w-full p-2 border rounded-md"
              />
            </div>

            <div>
              <label className="block text-sm mb-2">
                Town / City <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="city"
                value={formData.city}
                onChange={handleInputChange}
                className="w-full p-2 border rounded-md"
                required
              />
            </div>

            <div>
              <label className="block text-sm mb-2">
                State <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="state"
                value={formData.state}
                onChange={handleInputChange}
                className="w-full p-2 border rounded-md"
                required
              />
            </div>

            <div>
              <label className="block text-sm mb-2">
                ZIP Code <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="zipCode"
                value={formData.zipCode}
                onChange={handleInputChange}
                className="w-full p-2 border rounded-md"
                required
              />
            </div>
          </div>
        </div>

        {/* 订单摘要 */}
        <div>
          <h2 className="text-xl font-semibold mb-6">Your Order</h2>
          <div className="bg-white rounded-lg shadow p-6">
            <div className="space-y-4">
              <div>
                <h3 className="font-medium mb-3">Product</h3>
                <div className="flex justify-between py-2 border-b">
                  <span>ZYN Icy Mint XX-Strong 12.5mg - 5 cans × 2</span>
                  <span>$39.90</span>
                </div>
              </div>

              <div className="flex justify-between py-2 border-b">
                <span>Subtotal</span>
                <span>$39.90</span>
              </div>

              <div className="flex justify-between py-2 border-b">
                <span>Shipping</span>
                <span>Flat rate: $6.00</span>
              </div>

              <div className="flex justify-between py-2 font-semibold">
                <span>Total</span>
                <span>$45.90</span>
              </div>

              <div className="pt-4">
                <label className="block text-sm mb-2">If you have a coupon code, please apply it below</label>
                <div className="flex gap-2">
                  <input
                    type="text"
                    placeholder="Coupon code"
                    className="flex-1 p-2 border rounded-md"
                  />
                  <button 
                    className="px-4 py-2 bg-blue-600 text-white rounded-md"
                    onClick={() => window.location.href = '/pay'}
                  >
                    Apply
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
} 